<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-03-26 16:40:05
 * @LastEditors: taosong
 * @LastEditTime: 2023-03-30 20:53:35
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="X-UA-Compatible"
      content="IE=edge"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>canvas指针</title>
  </head>
  <body>
    <canvas
      id="canvas"
      width="500"
      height="500"
      style="background-color: yellow"
    ></canvas>

    <script>
      /** @type {HTMLCanvasElement} */
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')
      let angle = 0

      function drawPointer() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.save()
        ctx.translate(canvas.width / 2, canvas.height / 2)
        ctx.rotate(angle)
        ctx.beginPath()
        ctx.moveTo(0, -50)
        ctx.lineTo(10, 0)
        ctx.lineTo(0, 50)
        ctx.lineTo(-10, 0)
        ctx.closePath()
        ctx.fillStyle = 'black'
        ctx.fill()
        ctx.restore()
      }

      drawPointer()

      canvas.addEventListener('wheel', (event) => {
        event.preventDefault()
        angle += event.deltaY > 0 ? Math.PI / 4 : -Math.PI / 4
        drawPointer()
      })
    </script>
  </body>
</html>
